<!--
    转载自codepen.io, 代码源地址: https://codepen.io/ricardoolivaalonso/pen/yLOpNdZ
    Designed by: Joanna Ngai
    Original image: https://dribbble.com/shots/14118297-Villa
-->
<template lang="pug">
#h.house(style="transform: perspective(20000px) rotateX(77.8254deg) rotateZ(38.1771deg) translateZ(-9vw)")
  .shadows
    .shadow-a
    .shadow-b
  .al
    .al__front.face
    .al__back.face
    .al__right.face
    .al__left.face
    .al__top.face
    .al__bottom.face
  .ab
    .ab__front.face
    .ab__back.face
    .ab__right.face
    .ab__left.face
    .ab__top.face
    .ab__bottom.face
  .at
    .at__front.face
    .at__back.face
    .at__right.face
    .at__left.face
    .at__top.face
    .at__bottom.face
  .ac
    .ac__front.face
    .ac__back.face
    .ac__right.face
    .ac__left.face
    .ac__top.face
    .ac__bottom.face
  .bce
    .bce__front.face
    .bce__back.face
    .bce__right.face
    .bce__left.face
    .bce__top.face
    .bce__bottom.face
  .bci
    .bci__front.face
    .bci__back.face
    .bci__right.face
    .bci__left.face
    .bci__top.face
    .bci__bottom.face
  .bl
    .bl__front.face
    .bl__back.face
    .bl__right.face
    .bl__left.face
    .bl__top.face
    .bl__bottom.face
  .bt
    .bt__front.face
    .bt__back.face
    .bt__right.face
    .bt__left.face
    .bt__top.face
    .bt__bottom.face
  .bbe
    .bbe__front.face
    .bbe__back.face
    .bbe__right.face
    .bbe__left.face
    .bbe__top.face
    .bbe__bottom.face
  .bbi
    .bbi__front.face
    .bbi__back.face
    .bbi__right.face
    .bbi__left.face
    .bbi__top.face
    .bbi__bottom.face
  .cl
    .cl__front.face
      .lamp
    .cl__back.face
    .cl__right.face
    .cl__left.face
    .cl__top.face
    .cl__bottom.face
  .cc
    .cc__front.face
    .cc__back.face
    .cc__right.face
    .cc__left.face
    .cc__top.face
    .cc__bottom.face
  .ccl
    .ccl__front.face
    .ccl__back.face
    .ccl__right.face
    .ccl__left.face
    .ccl__top.face
    .ccl__bottom.face
  .cml
    .cml__front.face
    .cml__back.face
    .cml__right.face
    .cml__left.face
    .cml__top.face
    .cml__bottom.face
  .cmr
    .cmr__front.face
    .cmr__back.face
    .cmr__right.face
    .cmr__left.face
    .cmr__top.face
    .cmr__bottom.face
  .cmt
    .cmt__front.face
    .cmt__back.face
    .cmt__right.face
    .cmt__left.face
    .cmt__top.face
    .cmt__bottom.face
  .dl
    .dl__front.face
    .dl__back.face
    .dl__right.face
    .dl__left.face
    .dl__top.face
    .dl__bottom.face
  .dm
    .dm__front.face
    .dm__back.face
    .dm__right.face
    .dm__left.face
    .dm__top.face
    .dm__bottom.face
  .dt
    .dt__front.face
    .dt__back.face
    .dt__right.face
    .dt__left.face
    .dt__top.face
    .dt__bottom.face
  .el
    .el__front.face
  .ec
    .ec__front.face
  .er
    .er__right.face
  .eb
    .eb__back.face
  .fl
    .fl__front.face
    .fl__back.face
    .fl__right.face
    .fl__left.face
    .fl__top.face
    .fl__bottom.face
  .ft
    .ft__front.face
    .ft__back.face
    .ft__right.face
    .ft__left.face
    .ft__top.face
    .ft__bottom.face
  .fb
    .fb__front.face
    .fb__back.face
    .fb__right.face
    .fb__left.face
    .fb__top.face
    .fb__bottom.face
  .table
    .table__front.face
    .table__back.face
    .table__right.face
    .table__left.face
    .table__top.face
    .table__bottom.face
      .foot
        .foot__front.face
        .foot__back.face
        .foot__right.face
        .foot__left.face
        .foot__top.face
        .foot__bottom.face
      .foot
        .foot__front.face
        .foot__back.face
        .foot__right.face
        .foot__left.face
        .foot__top.face
        .foot__bottom.face
      .foot
        .foot__front.face
        .foot__back.face
        .foot__right.face
        .foot__left.face
        .foot__top.face
        .foot__bottom.face
      .foot
        .foot__front.face
        .foot__back.face
        .foot__right.face
        .foot__left.face
        .foot__top.face
        .foot__bottom.face
  .kitchen
    .kitchen__front.face
    .kitchen__back.face
    .kitchen__right.face
    .kitchen__left.face
    .kitchen__top.face
    .kitchen__bottom.face
  .couch
    .couch__front.face
    .couch__back.face
    .couch__right.face
    .couch__left.face
    .couch__top.face
    .couch__bottom.face
  .couchb
    .couchb__front.face
    .couchb__back.face
    .couchb__right.face
    .couchb__left.face
    .couchb__top.face
    .couchb__bottom.face
  .couchc
    .couchc__front.face
    .couchc__back.face
    .couchc__right.face
    .couchc__left.face
    .couchc__top.face
    .couchc__bottom.face
  .couchd
    .couchd__front.face
    .couchd__back.face
    .couchd__right.face
    .couchd__left.face
    .couchd__top.face
    .couchd__bottom.face
  .picture
    .picture__front.face
    .picture__back.face
    .picture__right.face
    .picture__left.face
    .picture__top.face
    .picture__bottom.face
  .door-r
    .door-r__front.face
    .door-r__back.face
    .door-r__right.face
    .door-r__left.face
    .door-r__top.face
    .door-r__bottom.face
  .door-l
    .door-l__front.face
    .door-l__back.face
    .door-l__right.face
    .door-l__left.face
    .door-l__top.face
    .door-l__bottom.face
  .door-b
    .door-b__front.face
    .door-b__back.face
    .door-b__right.face
    .door-b__left.face
    .door-b__top.face
    .door-b__bottom.face
  .door-t
    .door-t__front.face
    .door-t__back.face
    .door-t__right.face
    .door-t__left.face
    .door-t__top.face
    .door-t__bottom.face
</template>

<style lang="scss" scoped>
$bg-1: #c6c5e1;
$bg-2: #686688;

$white-1: #fbfbfb;
$white-2: #f2f2f2;
$white-3: #c4c2d6;
$white-4: #675d6e;

$water-1: #7095c9;
$water-2: #6187be;
$water-3: #4d6d98;
$water-4: #234062;

$light-1: #def5f1;
$light-2: #badfd9;

$cta-1: #90aace;
$cta-2: darken($cta-1, 10);
$cta-3: darken($cta-2, 10);

/***********************/
/***********************/
@mixin cube($width, $height, $depth) {
  &__front {
    @include cube-front($width, $height, $depth);
  }
  &__back {
    @include cube-back($width, $height, $depth);
  }
  &__right {
    @include cube-right($width, $height, $depth);
  }
  &__left {
    @include cube-left($width, $height, $depth);
  }
  &__top {
    @include cube-top($width, $height, $depth);
  }
  &__bottom {
    @include cube-bottom($width, $height, $depth);
  }
}
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
@mixin cube-front($width, $height, $depth) {
  width: $width;
  height: $height;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-($height - ($depth * 2)));
}
@mixin cube-back($width, $height, $depth) {
  width: $width;
  height: $height;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height);
}
@mixin cube-right($width, $height, $depth) {
  width: $depth * 2;
  height: $height;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2)
    translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
  width: $depth * 2;
  height: $height;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
  width: $width;
  height: $depth * 2;
  transform-origin: top left;
  transform: translateZ($height);
}
@mixin cube-bottom($width, $height, $depth) {
  width: $width;
  height: $depth * 2;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-$width);
}
/***********************/
/***********************/
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {
  animation: #{$animation} #{$time} infinite ease;

  @keyframes #{$animation} {
    0%,
    15%,
    45%,
    60%,
    62%,
    68% {
      @if $side == 'cube-front' {
        @include cube-front($width-el, $height-el, $depth-el);
      } @else if $side == 'cube-back' {
        @include cube-back($width-el, $height-el, $depth-el);
      } @else if $side == 'cube-right' {
        @include cube-right($width-el, $height-el, $depth-el);
      } @else if $side == 'cube-left' {
        @include cube-left($width-el, $height-el, $depth-el);
      } @else if $side == 'cube-top' {
        @include cube-top($width-el, $height-el, $depth-el);
      }
    }
    20%,
    40%,
    58%,
    64%,
    70%,
    100% {
      @if $side == 'cube-front' {
        @include cube-front($width-el, $height-finish, $depth-el);
      } @else if $side == 'cube-back' {
        @include cube-back($width-el, $height-finish, $depth-el);
      } @else if $side == 'cube-right' {
        @include cube-right($width-el, $height-finish, $depth-el);
      } @else if $side == 'cube-left' {
        @include cube-left($width-el, $height-finish, $depth-el);
      } @else if $side == 'cube-top' {
        @include cube-top($width-el, $height-finish, $depth-el);
      }
    }
  }
}
/**/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}
/* Generic */
body {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: $bg-1;
  cursor: pointer;
}

.face {
  position: absolute;
}

/***************/
.house {
  width: 36vw;
  height: 24vw;
  transform: perspective(20000px) rotateX(75deg) rotateZ(35deg) translateZ(-9vw);
  transition: transform 0.1s linear;
  margin: 0 auto;
}
.shadows {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.shadow-a {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 130%;
  height: 103%;
  transform-origin: top right;
  transform: skewY(-3deg);
  background-color: $bg-2;
  box-shadow: -1vw 1vw 1.5vw $bg-2;
  filter: blur(0.5vw);
}
.shadow-b {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101.5%;
  background-color: darken($bg-2, 4);
}
/***************/
/***************/
.al {
  $width-el: 30vw;
  $height-el: 0.4vw;
  $depth-el: 12vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 3vw;
  height: 24vw;
  position: absolute;
  left: 0;
  top: 0;

  &__front {
    background-image: linear-gradient(to right, darken($white-3, 20), $white-3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: darken($white-3, 25);
  }
  &__top {
    background-image: linear-gradient(
      to right,
      darken($white-3, 10) 40%,
      darken($white-2, 5),
      $white-2
    );
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      width: 13vw;
      height: 7vw;

      background-image: linear-gradient(-135deg, transparent 20%, rgba(darken($light-2, 5), 0.75));
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 1vw;
      left: 6vw;
      width: 5vw;
      height: 5vw;
      border-radius: 50%;
      background-image: radial-gradient(rgba($white-1, 0.25), transparent);
      filter: blur(0.7vw);
    }
  }
  &__bottom {
    background-color: $white-3;
  }
}
.ab {
  $width-el: 8vw;
  $height-el: 0.4vw;
  $depth-el: 4vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 8vw;
  height: 8vw;
  position: absolute;
  right: 0;
  bottom: 0;

  &__front {
    background-color: $white-3;
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-1;
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
  }
}
.at {
  $width-el: 8vw;
  $height-el: 0.4vw;
  $depth-el: 2vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 8vw;
  height: 4vw;
  position: absolute;
  right: 0;
  top: 0;

  &__front {
    background-color: $white-3;
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-1;
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
  }
}
.ac {
  $width-el: 6vw;
  $height-el: 1vw;
  $depth-el: 6vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 6vw;
  height: 12vw;
  position: absolute;
  right: 0;
  top: 4vw;

  .face {
    opacity: 0.9;
  }

  &__front {
    background-color: $water-3;
    opacity: 0.75;
  }
  &__back {
    background-color: $water-3;
  }
  &__right {
    background-image: linear-gradient(to top, $water-2, $water-1);
  }
  &__left {
    background-color: darken($water-4, 10);
  }
  &__top {
    opacity: 0.75;
    background-image: linear-gradient(
      to right,
      $water-1 0,
      $water-1 5%,
      $water-2 20%,
      $water-2 30%,
      $water-1 40%,
      $water-1 65%,
      darken($water-1, 3) 70%,
      darken($water-1, 3) 72%,
      $water-1 85%
    );

    box-shadow: inset 0.5vw 0.5vw 2vw rgba($white-1, 0.5);

    &::before {
      content: '';
      position: absolute;
      width: 40%;
      height: 100%;
      overflow: hidden;

      background-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 10%,
        rgba($water-2, 0.9) 15%,
        rgba($water-2, 0.9) 40%,
        rgba($white-1, 0.2) 40%,
        rgba($white-1, 0.2) 50%,
        transparent 60%
      );

      filter: blur(0.15vw);
    }
  }
  &__bottom {
    background-color: $water-3;
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: -0.25vw 0.25vw 1vw $water-4;
    }
  }
}
/***************/
/***************/
.bce {
  $width-el: 17vw;
  $height-el: 0.5vw;
  $depth-el: 11vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 17vw;
  height: 20.5vw;
  position: absolute;
  right: 6vw;
  top: 0;
  transform: translateZ(0.41vw);

  &__front {
    background-image: linear-gradient(to right, darken($white-3, 10), $white-3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-2;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-image: linear-gradient(135deg, darken($white-3, 10) 60%, $white-2);
  }
  &__bottom {
    background-color: $white-3;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 101%;
      background-color: $white-4;
      filter: blur(0.35vw);
    }
  }
}
.bci {
  $width-el: 16vw;
  $height-el: 0.5vw;
  $depth-el: 10.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 16vw;
  height: 21vw;
  position: absolute;
  right: 6vw;
  top: 0;
  transform: translateZ(0.92vw);

  &__front {
    background-image: linear-gradient(to right, darken($white-3, 10), $white-3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-2;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-image: linear-gradient(135deg, darken($white-3, 10) 60%, $white-2);

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 16.4vw;
      background-color: lighten($bg-1, 5);
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 1.5vw;
      left: 1vw;
      width: 10vw;
      height: 3.5vw;
      border-radius: 50%;
      background-image: radial-gradient($light-2, transparent);
      filter: blur(0.5vw);
    }
  }
  &__bottom {
    background-color: $white-3;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 101%;
      background-color: $white-4;
      filter: blur(0.35vw);
    }
  }
}
.bl {
  $width-el: 13.1vw;
  $height-el: 0.5vw;
  $depth-el: 8.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 13vw;
  height: 17vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0.41vw);

  &__front {
    background-image: linear-gradient(to right, darken($white-3, 30), darken($white-3, 10));
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-2;
  }
  &__left {
    background-color: $white-1;
  }
  &__top {
    background-color: lighten($bg-1, 5);
    &::before {
      content: '';
      position: absolute;
      top: 2vw;
      left: 3.5vw;
      width: 12vw;
      height: 12vw;
      border-radius: 50%;
      background-color: rgba($light-1, 0.35);
      filter: blur(0.95vw);
    }
  }
  &__bottom {
    background-color: $white-3;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 102%;
      background-color: darken($white-3, 20);
      box-shadow: 0vw 0.25vw 1vw darken($white-3, 20);
    }
  }
}
.bt {
  $width-el: 4vw;
  $height-el: 1.1vw;
  $depth-el: 2vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 4vw;
  height: 4vw;
  position: absolute;
  right: 2vw;
  top: 0;
  transform: translateZ(0.41vw);

  &__front {
    background-image: linear-gradient(to top, darken($white-3, 15) 50%, lighten($white-3, 2));
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-2;
  }
  &__left {
    background-color: $white-1;
  }
  &__top {
    background-color: darken($white-2, 5);
  }
  &__bottom {
    background-color: $white-3;
  }
}
.bbe {
  $width-el: 6vw;
  $height-el: 0.5vw;
  $depth-el: 3vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 6vw;
  height: 6vw;
  position: absolute;
  right: 0;
  bottom: 2vw;
  transform: translateZ(0.41vw);

  &__front {
    background-color: $white-3;
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-2;
  }
  &__left {
    background-color: $white-1;
  }
  &__top {
    background-color: darken($white-1, 2);
  }
  &__bottom {
    background-color: $white-1;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 95%;
      height: 104%;
      background-color: $white-4;
      filter: blur(0.35vw);
    }
  }
}
.bbi {
  $width-el: 4vw;
  $height-el: 0.5vw;
  $depth-el: 2.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 4vw;
  height: 5vw;
  position: absolute;
  right: 2vw;
  bottom: 3vw;
  transform: translateZ(0.92vw);

  &__front {
    background-color: $white-3;
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-2;
  }
  &__left {
    background-color: $white-1;
  }
  &__top {
    background-color: darken($white-2, 2);
  }
  &__bottom {
    background-color: $white-1;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 95%;
      height: 104%;
      background-color: $white-4;
      filter: blur(0.5vw);
    }
  }
}
/***************/
/***************/
.cl {
  $width-el: 3.5vw;
  $height-el: 12vw;
  $depth-el: 9.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 5vw;
  height: 3vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0.41vw);

  &__front {
    display: flex;
    justify-content: center;
    background-image: linear-gradient(to bottom, $white-3, darken($white-3, 15));
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1.1vw;
      width: 200%;
      height: 3vw;
      background-image: linear-gradient(to right, rgba($light-1, 0.3), rgba($white-3, 0.25));
      filter: blur(0.175vw);
      transform: rotateZ(-30deg);
    }
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-image: linear-gradient(
      to top,
      darken($white-3, 10),
      darken($white-3, 20),
      lighten($light-2, 5) 70%
    );
    &::before {
      content: '';
      position: absolute;
      right: 0;
      width: calc(100% - 2.5vw);
      height: 100%;
      background-image: linear-gradient(
        to bottom,
        $white-1,
        lighten($light-2, 5) 15%,
        darken($white-2, 10) 80%,
        darken($white-3, 10)
      );
      filter: blur(0.5vw);
    }
    .lamp:nth-of-type(1) {
      left: 25%;
    }
    .lamp:nth-of-type(2) {
      left: 50%;
    }
    .lamp:nth-of-type(3) {
      left: 75%;
    }
  }
  &__left {
    background-image: linear-gradient(to top, darken($white-3, 20), darken($white-3, 30));
  }
  &__top {
    background-color: darken($white-3, 5);
  }
  &__bottom {
    background-color: $white-3;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 115%;
      height: 103%;
      background-color: rgba($white-4, 0.75);
      filter: blur(0.5vw);
    }
  }
}

.cc {
  $width-el: 1vw;
  $height-el: 12.5vw;
  $depth-el: 9.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 1vw;
  height: 19vw;
  position: absolute;
  left: 15vw;
  top: 0;
  transform: translateZ(12.5vw);

  &__front {
    background-image: linear-gradient(to bottom, darken($white-3, 5), $white-3 10%);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-image: linear-gradient(to top, darken($white-3, 20), darken($white-3, 30));
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
  }
}
.ccl {
  $width-el: 1vw;
  $height-el: 11.5vw;
  $depth-el: 1.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 1vw;
  height: 3vw;
  position: absolute;
  left: 15vw;
  top: 16vw;
  transform: translateZ(1.43vw);

  &__front {
    background-image: linear-gradient(to top, darken($white-3, 10), $white-3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-image: linear-gradient(
      to bottom,
      darken($white-3, 30),
      darken($white-3, 20) 70%,
      $light-2
    );

    &::before {
      content: '';
      position: absolute;
      top: -0.5vw;
      left: 0;
      width: 100%;
      height: 2vw;
      transform-origin: bottom left;
      transform: translateZ(0.05vw);
      background-image: linear-gradient(
        -45deg,
        darken($white-3, 20),
        darken($white-3, 30) 80%,
        transparent 80%
      );
    }
  }
  &__left {
    background-image: linear-gradient(to top, darken($white-3, 20), darken($white-3, 30));
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 102%;
      height: 101%;
      background-color: $white-4;
      filter: blur(0.35vw);
    }
  }
}
.cml {
  $width-el: 16vw;
  $height-el: 1vw;
  $depth-el: 9.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 16vw;
  height: 19vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(12.41vw);

  &__front {
    background-image: linear-gradient(to bottom, darken($white-3, 3), $white-3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: darken($white-3, 30);
  }
  &__top {
    background-image: linear-gradient(
      to right,
      darken($white-3, 20),
      darken($white-3, 10) 30%,
      darken($light-2, 10)
    );
    box-shadow: inset 0.3vw 0.3vw 2vw rgba($white-4, 0.1),
      inset -0.3vw 0.3vw 2vw rgba($white-4, 0.1), inset 0.3vw -0.3vw 2vw rgba($white-4, 0.1),
      inset -0.3vw -0.3vw 2vw rgba($white-4, 0.1);
  }
  &__bottom {
    background-color: $white-3;
  }
}
.cmr {
  $width-el: 16vw;
  $height-el: 1vw;
  $depth-el: 9vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 16vw;
  height: 18vw;
  position: absolute;
  left: 16vw;
  top: 0;
  transform: translateZ(12.41vw);

  &__front {
    background-image: linear-gradient(to bottom, darken($white-3, 5), $white-3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-image: linear-gradient(to right, $white-2, darken($white-2, 2));

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(48.5deg, lighten($white-2, 2) 50%, transparent 50%);
      opacity: 0.35;
    }
  }
  &__bottom {
    background-color: $white-3;
  }
}
.cmt {
  $width-el: 12vw;
  $height-el: 1vw;
  $depth-el: 9.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 12vw;
  height: 19vw;
  position: absolute;
  left: 3vw;
  top: 0;
  transform: translateZ(24vw);

  &__front {
    background-image: linear-gradient(to bottom, darken($white-3, 5), $white-3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: darken($white-3, 10);
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
  }
}

/***************/
/***************/
.dl {
  $width-el: 2vw;
  $height-el: 11vw;
  $depth-el: 0.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 2vw;
  height: 1vw;
  position: absolute;
  left: 21.9vw;
  bottom: 7vw;
  transform: translateZ(1.5vw);

  &__front {
    background-image: linear-gradient(
      to bottom,
      darken($white-3, 20),
      darken($white-3, 15) 35%,
      darken($white-3, 10) 72%,
      $light-2
    );
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-3;
  }
  &__left {
    background-color: darken($white-3, 15);
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 102%;
      height: 101%;
      background-color: $white-4;
      filter: blur(0.35vw);
    }
  }
}
.dm {
  $width-el: 6vw;
  $height-el: 4vw;
  $depth-el: 0.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 6vw;
  height: 1vw;
  position: absolute;
  left: 16vw;
  bottom: 7vw;
  transform: translateZ(8.5vw);

  &__front {
    background-image: linear-gradient(to bottom, darken($white-3, 20), darken($white-3, 15));
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
  }
}
.dt {
  $width-el: 8vw;
  $height-el: 11vw;
  $depth-el: 0.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 8vw;
  height: 1vw;
  position: absolute;
  left: 14vw;
  top: 0;
  transform: translateZ(1.5vw);

  &__front {
    background-color: $white-2;
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-2;
  }
  &__top {
    background-color: $white-2;
  }
  &__bottom {
    background-color: $white-3;
  }
}
/***************/
/***************/
.el {
  $width-el: 11.4vw;
  $height-el: 11.5vw;
  $depth-el: 0.25vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 11.4vw;
  height: 1vw;
  position: absolute;
  left: 3.5vw;
  bottom: 7vw;
  transform: translateZ(1vw);

  &__front {
    border: 0.1vw solid rgba($water-3, 0.5);
    overflow: hidden;
    background-image: repeating-linear-gradient(
      -45deg,
      rgba($water-2, 0.1) 1vw,
      rgba($water-1, 0.1) 1.5vw
    );
  }
}
.ec {
  $width-el: 14vw;
  $height-el: 11vw;
  $depth-el: 0.25vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 14vw;
  height: 1vw;
  position: absolute;
  left: 16vw;
  bottom: 7vw;
  transform: translateZ(1.5vw);

  &__front {
    border: 0.1vw solid rgba($water-3, 0.5);
    overflow: hidden;
    background-image: linear-gradient(to right, rgba($water-2, 0.1), rgba($water-1, 0.1));
  }
}
.er {
  $width-el: 0.1vw;
  $height-el: 11vw;
  $depth-el: 8.3vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 14vw;
  height: 1vw;
  position: absolute;
  left: 29.8vw;
  top: 0;
  transform: translateZ(1.5vw);

  &__right {
    border: 0.1vw solid rgba($water-3, 0.5);
    overflow: hidden;
    background-image: linear-gradient(to right, rgba($water-2, 0.1), rgba($water-1, 0.1));
  }
}
.eb {
  $width-el: 26.4vw;
  $height-el: 11.4vw;
  $depth-el: 0.25vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 26.4vw;
  height: 1vw;
  position: absolute;
  left: 3.5vw;
  top: 0;
  transform: translateZ(1vw);

  &__back {
    border: 0.1vw solid rgba($water-3, 0.5);
    overflow: hidden;
    background-image: linear-gradient(to right, rgba($water-2, 0.1), rgba($water-1, 0.1));
  }
}
/***************/
/***************/
.fl {
  $width-el: 0.25vw;
  $height-el: 0.25vw;
  $depth-el: 8.45vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 1vw;
  height: 8.45vw;
  position: absolute;
  left: 1.5vw;
  top: 1vw;
  transform: translateZ(16.75vw);

  &__front {
    background-color: darken($white-3, 10);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-image: linear-gradient(to bottom, darken($white-3, 10), darken($white-3, 16) 50%);
  }
  &__left {
    background-color: darken($white-3, 20);
    &::before {
      content: '';
      position: absolute;
      top: 0.25vw;
      right: 0;
      width: 100%;
      height: 3.25vw;
      border: 0.1vw solid rgba($water-3, 0.5);
    }
  }
  &__top {
    background-image: linear-gradient(to bottom, darken($white-3, 10), darken($white-2, 5));
  }
  &__bottom {
    background-color: $white-3;
  }
}
.fb,
.ft {
  $width-el: 14vw;
  $height-el: 0.25vw;
  $depth-el: 0.125vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 5vw;
  height: 0.25vw;
  position: absolute;
  left: 1.5vw;
  bottom: 6.1vw;
  transform: translateZ(16.75vw);
  &__front {
    background-color: darken($white-3, 10);

    &::before {
      content: '';
      position: absolute;
      top: 0.25vw;
      left: 0.1vw;
      width: calc(100% - 0.25vw);
      height: 3.25vw;
      border: 0.1vw solid rgba($water-3, 0.5);
      background-image: linear-gradient(to right, rgba($water-2, 0.15), rgba($water-1, 0.15));
    }
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-image: linear-gradient(to bottom, darken($light-2, 10), darken($white-2, 5));
  }
  &__bottom {
    background-color: $white-3;
  }
}
.ft {
  top: 1vw;
}
/***************/
/***************/
.table {
  $width-el: 3vw;
  $height-el: 0.25vw;
  $depth-el: 2.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 3vw;
  height: 5vw;
  right: 10.5vw;
  bottom: 13vw;
  position: absolute;
  transform: translateZ(2.25vw);

  &__front {
    background-color: lighten($white-3, 3);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-color: darken($white-2, 3);
  }
  &__bottom {
    background-color: $white-3;
  }

  &::before {
    content: '';
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    background-color: darken($white-3, 5);
    filter: blur(0.5vw);
    transform: translateZ(-0.81vw);
  }
}
.foot {
  $width-el: 0.25vw;
  $height-el: 1vw;
  $depth-el: 0.125vw;

  @include cube($width-el, $height-el, $depth-el);
  width: 0.25vw;
  height: 0.25vw;

  position: absolute;
  &__front {
    background-color: lighten($white-3, 3);
  }
  &__back {
    background-color: $white-2;
  }
  &__right {
    background-color: $white-3;
  }
  &__left {
    background-color: $white-2;
  }
  &__top {
    background-color: $white-3;
  }
  &__bottom {
    background-color: $white-3;
  }

  &:nth-of-type(1) {
    bottom: 0;
    right: 0;
  }
  &:nth-of-type(2) {
    bottom: 0;
    left: 0;
  }
  &:nth-of-type(3) {
    top: 0;
    right: 0;
  }
  &:nth-of-type(4) {
    top: 0;
    left: 0;
  }
}

/***************/
/***************/
.lamp {
  position: absolute;
  top: 2.5vw;
  width: 0.75vw;
  height: 2.5vw;
  border-radius: 5vw;
  opacity: 0.95;
  background-color: $light-1;
  box-shadow: 0.15vw 0.15vw 0.75vw rgba($light-2, 0.5), 0.15vw -0.15vw 0.75vw rgba($light-2, 0.5),
    -0.15vw 0.15vw 0.75vw rgba($light-2, 0.5), -0.15vw -0.15vw 0.75vw rgba($light-2, 0.5);
  filter: blur(0.15vw);
}
/***************/
/***************/
.kitchen {
  $width-el: 2vw;
  $height-el: 0.25vw;
  $depth-el: 6vw;

  @include cube($width-el, $height-el, $depth-el);
  width: 2vw;
  height: 12vw;
  top: 3vw;
  left: 3.5vw;
  transform: translateZ(3vw);
  position: absolute;

  &__front {
    background-color: darken($white-3, 10);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-3;

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      top: 0.25vw;
      height: 1.25vw;
      background-color: rgba(lighten($white-4, 20), 0.75);
      filter: blur(0.5vw);
    }
  }
  &__top {
    background-image: linear-gradient(to right, lighten($light-1, 3), lighten($light-1, 5) 60%);
  }
  &__bottom {
    background-color: $white-3;
  }
}
/***************/
/***************/
.couch {
  $width-el: 5vw;
  $height-el: 2vw;
  $depth-el: 1.5vw;

  @include cube($width-el, $height-el, $depth-el);
  width: 5vw;
  height: 3vw;
  top: 0.5vw;
  left: 16vw;
  transform: translateZ(1.5vw);
  position: absolute;

  &__front {
    background-color: lighten($white-3, 6);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-color: darken($white-2, 3);
  }
  &__bottom {
    background-color: $white-3;

    &::before {
      content: '';
      position: absolute;
      left: -10%;
      top: -10%;
      width: 120%;
      height: 120%;
      background-color: rgba(darken($white-3, 10), 0.5);
      filter: blur(0.25vw);
    }
  }
}
.couchb {
  $width-el: 7vw;
  $height-el: 0.75vw;
  $depth-el: 2.5vw;

  @include cube($width-el, $height-el, $depth-el);
  width: 7vw;
  height: 1vw;
  bottom: 17vw;
  left: 6vw;
  transform: translateZ(1vw);
  position: absolute;

  &__front {
    background-color: lighten($white-3, 6);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-color: $white-1;
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-image: linear-gradient(to right, lighten($light-1, 3), lighten($light-1, 5) 60%);
  }
  &__bottom {
    background-color: $white-3;

    &::before {
      content: '';
      position: absolute;
      left: -10%;
      top: -10%;
      width: 120%;
      height: 120%;
      background-color: rgba(darken($white-3, 10), 0.5);
      filter: blur(0.25vw);
    }
  }
}
.couchc,
.couchd {
  $width-el: 5vw;
  $height-el: 1.5vw;
  $depth-el: 0.75vw;

  @include cube($width-el, $height-el, $depth-el);
  width: 5vw;
  height: 1.5vw;
  bottom: 6.5vw;
  left: 9vw;
  transform: translateZ(13.5vw);
  position: absolute;

  &__front {
    background-color: darken($white-3, 0);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    background-image: linear-gradient(to bottom, darken($light-1, 5), $light-1, $white-2);
  }
  &__left {
    background-color: darken($white-3, 15);
  }
  &__top {
    background-image: linear-gradient(to left, darken($light-1, 5), $light-1, $white-2);
  }
  &__bottom {
    background-color: $white-3;

    &::before {
      content: '';
      position: absolute;
      left: -10%;
      top: -10%;
      width: 120%;
      height: 120%;
      background-color: rgba(darken($white-3, 30), 0.5);
      filter: blur(0.25vw);
    }
  }
}

.couchd {
  top: 1.5vw;
}
/***************/
/***************/
.picture {
  $width-el: 0.35vw;
  $height-el: 4vw;
  $depth-el: 1.5vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 0.5vw;
  height: 3vw;
  bottom: 14vw;
  left: 3.35vw;
  transform: translateZ(6vw);
  position: absolute;

  &__front {
    background-color: darken($white-3, 0);
  }
  &__back {
    background-color: $white-3;
  }
  &__right {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom, $light-1, $white-1);
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 1.1vw;
      height: 1.1vw;
      border: 0.125vw solid rgba($white-3, 0.5);
    }
    &::before {
      top: 40%;
      left: 25%;
    }
    &::after {
      top: 55%;
      left: 45%;
    }
  }
  &__left {
    background-color: $white-3;
  }
  &__top {
    background-color: darken($white-2, 3);
  }
  &__bottom {
    background-color: $white-3;
  }
}
/***************/
/***************/
.door-l {
  $width-el: 0.125vw;
  $height-el: 7vw;
  $depth-el: 0.25vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 0.125vw;
  height: 1vw;
  left: 17vw;
  bottom: 6.75vw;
  transform: translateZ(1.5vw);

  position: absolute;

  &__front {
    background-color: darken($white-3, 50);
  }
  &__back {
    background-color: darken($white-3, 28);
  }
  &__right {
    background-color: darken($white-3, 28);
  }
  &__left {
    background-color: darken($white-3, 50);
  }
  &__top {
    background-color: darken($white-3, 28);
  }
  &__bottom {
    background-color: darken($white-3, 28);
  }
}
.door-r {
  $width-el: 2vw;
  $height-el: 7vw;
  $depth-el: 0.25vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 2vw;
  height: 1vw;
  left: 20vw;
  bottom: 6.75vw;
  transform: translateZ(1.5vw);

  position: absolute;

  &__front {
    background-color: darken($white-3, 50);
  }
  &__back {
    background-color: darken($white-3, 28);
  }
  &__right {
    background-color: darken($white-3, 28);
  }
  &__left {
    background-color: darken($white-3, 50);
  }
  &__top {
    background-color: darken($white-3, 28);
  }
  &__bottom {
    background-color: darken($white-3, 28);
  }
}
.door-b,
.door-t {
  $width-el: 6vw;
  $height-el: 0.125vw;
  $depth-el: 0.25vw;

  @include cube($width-el, $height-el, $depth-el);

  width: 2vw;
  height: 1vw;
  left: 16vw;
  bottom: 6.75vw;
  transform: translateZ(1.5vw);

  position: absolute;

  &__front {
    background-color: darken($white-3, 50);
  }
  &__back {
    background-color: darken($white-3, 28);
  }
  &__right {
    background-color: darken($white-3, 28);
  }
  &__left {
    background-color: darken($white-3, 28);
  }
  &__top {
    background-color: darken($white-3, 28);
  }
  &__bottom {
    background-color: darken($white-3, 28);
  }
}

.door-t {
  transform: translateZ(8.4vw);
}
</style>
